<div id="container">
    <div id="header">
        <nav class="navbar navbar-expand-md navbar-dark" id="nav">
            <button type="button" class="navbar-toggler navbar-toggler-right"
                    data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="https://github.com/gerbera/gerbera" title="Gerbera"><img class="d-inline-block align-top" alt="Gerbera Logo" /></a>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a id="nav-home" class="nav-link" data-gerbera-menu-cmd="HOME"><i class="fa fa-home"></i><span> Home</span> <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a id="nav-db" class="nav-link disabled" data-gerbera-menu-cmd="SELECT_TYPE" data-gerbera-type="db"><i class="fa fa-database"></i><span> Database</span></a>
                    </li>
                    <li class="nav-item">
                        <a id="nav-fs" class="nav-link disabled" data-gerbera-menu-cmd="SELECT_TYPE" data-gerbera-type="fs"><i class="fa fa-folder-open"></i><span> File System</span></a>
                    </li>
                    <li class="nav-item">
                        <a id="nav-clients" class="nav-link disabled" data-gerbera-menu-cmd="SELECT_CLIENTS" data-gerbera-type="clients"><i class="fa fa-desktop"></i><span> Clients</span></a>
                    </li>
                    <li class="nav-item">
                        <a id="nav-config" class="nav-link disabled" data-gerbera-menu-cmd="SELECT_CONFIG" data-gerbera-type="config"><i class="fa fa-sliders"></i><span> Config</span></a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a id="docs" class="nav-link disabled noactive" href="https://docs.gerbera.io/en/stable/" target="_blank"><i class="fa fa-question-circle"></i><span> Documentation</span></a>
                    </li>
                    <li class="nav-item">
                        <a id="report-issue" class="nav-link noactive" href="http://github.com/gerbera/gerbera/issues" target="_blank"><i class="fa fa-bug"></i><span> Report an Issue <i class="fa fa-external-link" aria-hidden="true"></i></span></a>
                    </li>
                </ul>
                <form id="login-form" class="form-inline my-2 my-lg-0">
                    <input id="username" class="form-control mr-sm-2 login-field" placeholder="Username" style="display:none;" />
                    <input id="password" type="password" class="form-control mr-sm-2 login-field" placeholder="Password"
                           style="display:none;" />
                    <button id="login-submit" class="btn btn-success my-2 my-sm-0">Login</button>
                    <button id='logout' type="button" class="btn btn-danger my-2 my-sm-0" style="display:none;">Logout</button>
                </form>
            </div>
        </nav>
        <div id="trail" class="row no-gutters"></div>
    </div>
    <div id="home" class="row">
        <div class="col-sm offset-sm-2">
            <div id="homeintro">
                <h2>Welcome to Gerbera</h2>
                <p>Gerbera is an open source UPnP-AV media server.</p>
            </div>
            <a id="addlink" href="javascript:;" onclick="$('#nav-fs').click(); // Replace with hashchange handling">
                <h4><i class="fa fa-plus"></i> Add some files</h4>
                <p>Browse and import your multimedia files into Gerbera.</p>
            </a>
            <a id="viewlink" href="javascript:;" onclick="$('#nav-db').click(); // Replace with hashchange handling">
                <h4><i class="fa fa-files-o"></i> View indexed files</h4>
                <span>View, update and remove files from Gerbera.</span>
            </a>
            <a id="clientlink" href="javascript:;" onclick="$('#nav-clients').click();">
                <h4><i class="fa fa-desktop"></i> Show connected clients</h4>
                <span>Show clients detected by Gerbera and their profile details</span>
            </a>
            <a id="configlink" href="javascript:;" onclick="$('#nav-config').click();">
                <h4><i class="fa fa-sliders"></i> Edit Configuration</h4>
                <span>Change settings for Gerbera</span>
            </a>
        </div>
    </div>
    <div id="content" style="display: none">
        <div id="left">
            <div id="tree">
            </div>
        </div>
        <div id="right">
            <div id="datagrid">
            </div>
        </div>
    </div>
    <div id="clients" style="display: none">
        <div id="clientframe">
            <div id="clientgrid">
            </div>
        </div>
    </div>
    <div id="config" style="display: none">
        <div id="configframe">
            <div id="configgrid">
            </div>
        </div>
    </div>
</div>

<div id="video" style="display: none;"></div>

<div id="editModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit Item</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group" id="objectIdGroup" hidden>
                        <label for="editdObjectIdTxt">ID</label>
                        <span id="editdObjectIdTxt" class="h3"></span><input type="hidden" class="form-control" id="objectId" readonly disabled>
                    </div>
                    <div class="form-group" id="parentIdGroup" hidden>
                        <label for="addParentId">Parent ID</label>
                        <span id="addParentIdTxt" class="h3"></span><input type="hidden" class="form-control" id="addParentId" readonly disabled>
                    </div>
                    <div class="form-group">
                        <img width="150px" id="mediaimage"/>
                        <div class="form-group" style="display: inline-block">
                            <div class="form-group" style="margin-left: 1em;">
                                <label for="editLmt">Last Modified</label>
                                <input type="text" class="form-control" id="editLmt">
                            </div>
                            <div class="form-group" style="margin-left: 1em;">
                                <label for="editLut">Last Updated</label>
                                <input type="text" class="form-control" id="editLut">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="editObjectType">Type</label>
                        <select id="editObjectType" class="form-control">
                            <option value="audio">Audio</option>
                            <option value="audioBroadcast">Audio Broadcast</option>
                            <option value="video">Video</option>
                            <option value="videoBroadcast">Video Broadcast</option>
                            <option value="container">Container</option>
                            <option value="item">Item</option>
                            <option value="external_url">External Link (URL)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editTitle">Title</label>
                        <input type="text" class="form-control" id="editTitle">
                    </div>
                    <div class="form-group">
                        <label for="editTitle">Location</label>
                        <input type="text" class="form-control" id="editLocation">
                    </div>
                    <div class="form-group">
                        <label for="editClass">Class</label>
                        <input type="text" class="form-control" id="editClass" value="default">
                    </div>
                    <div class="form-group">
                        <label for="editDesc">Description</label>
                        <input type="text" class="form-control" id="editDesc">
                    </div>
                    <div class="form-group">
                        <label for="editMime">Mimetype</label>
                        <input type="text" class="form-control" id="editMime">
                    </div>
                    <div class="form-group">
                        <label for="editProtocol">Protocol</label>
                        <input type="text" class="form-control" id="editProtocol">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="hidebutton" type="button" class="btn btn-default">Hide Details</button>
                <button id="detailbutton" type="button" class="btn btn-default">Show Details</button>
                <button id="editCancel" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="editSave" type="submit" class="btn btn-primary">Save Item</button>
            </div>
        </div>
    </div>
</div>

<div id="autoscanModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Autoscan</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form>
                        <div class="form-group" id="autoscan-persistent-msg">
                            <span>This is a persistent autoscan directory (defined in config), it can not be modified via the web UI.</span>
                        </div>
                        <div class="form-group row " hidden>
                            <div class="col-md-6">
                                <label for="autoscanId">ID:</label>
                            </div>
                            <div class="col-md-6">
                                <span id="autoscanIdTxt" class="overflow"></span>
                                <input type="hidden" id="autoscanId" />
                                <input type="checkbox" class="hidden" id="autoscanFromFs" />
                                <input type="checkbox" class="hidden" id="autoscanPersistent" />
                            </div>
                        </div>
                        <div class="form-check row">
                            <div class="col-md-6">
                                <label>Autoscan Mode:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <label for="autoscanModeNone" class="form-check-label">
                                        <input type="radio" name="autoscanMode" id="autoscanModeNone" class="form-check-input" value="none" /> None
                                    </label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <label for="autoscanModeTimed" class="form-check-label">
                                        <input type="radio" name="autoscanMode" id="autoscanModeTimed" class="form-check-input" value="timed" /> Timed
                                    </label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <label for="autoscanModeInotify" class="form-check-label">
                                        <input type="radio" name="autoscanMode" id="autoscanModeInotify" class="form-check-input" value="inotify" /> INotify
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-6 offset-md-6">
                                <div class="form-check form-check-inline">
                                    <label for="autoscanRecursive" class="form-check-label">
                                        <input type="checkbox" name="autoscanRecursive" id="autoscanRecursive" class="form-check-input" /> Recursive
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row no-gutters">
                          <div class="col-3">
                            <label>Audio</label>
                          </div>
                          <div class="col-9">
                            <div class="form-check">
                              <input type="checkbox" name="autoscanAudio" id="autoscanAudio" class="form-check-input"/>
                              <label for="autoscanAudio" class="form-check-label grb-media-type">All Audio</label>
                              <input type="checkbox" name="autoscanAudioMusic" id="autoscanAudioMusic" class="form-check-input"/>
                              <label for="autoscanAudioMusic" class="form-check-label grb-media-type">Music</label>
                              <input type="checkbox" name="autoscanAudioBook" id="autoscanAudioBook" class="form-check-input"/>
                              <label for="autoscanAudioBook" class="form-check-label grb-media-type">Audio Book</label>
                              <input type="checkbox" name="autoscanAudioBroadcast" id="autoscanAudioBroadcast" class="form-check-input"/>
                              <label for="autoscanAudioBroadcast" class="form-check-label grb-media-type">Audio Broadcast</label>
                            </div>
                          </div>
                        </div>
                        <div class="form-group row no-gutters">
                          <div class="col-3">
                            <label>Image</label>
                          </div>
                          <div class="col-9">
                            <div class="form-check">
                              <input type="checkbox" name="autoscanImage" id="autoscanImage" class="form-check-input"/>
                              <label for="autoscanImage" class="form-check-label grb-media-type">All Images</label>
                              <input type="checkbox" name="autoscanImagePhoto" id="autoscanImagePhoto" class="form-check-input"/>
                              <label for="autoscanImagePhoto" class="form-check-label grb-media-type">Photo</label>
                            </div>
                          </div>
                        </div>
                        <div class="form-group row no-gutters">
                          <div class="col-3">
                            <label>Video</label>
                          </div>
                          <div class="col-9">
                            <div class="form-check">
                              <input type="checkbox" name="autoscanVideo" id="autoscanVideo" class="form-check-input"/>
                              <label for="autoscanVideo" class="form-check-label grb-media-type">All Video</label>
                              <input type="checkbox" name="autoscanVideoMovie" id="autoscanVideoMovie" class="form-check-input"/>
                              <label for="autoscanVideoMovie" class="form-check-label grb-media-type">Movie</label>
                              <input type="checkbox" name="autoscanVideoTV" id="autoscanVideoTV" class="form-check-input"/>
                              <label for="autoscanVideoTV" class="form-check-label grb-media-type">TV</label>
                              <input type="checkbox" name="autoscanVideoMusicVideo" id="autoscanVideoMusicVideo" class="form-check-input"/>
                              <label for="autoscanVideoMusicVideo" class="form-check-label grb-media-type">Music Video</label>
                            </div>
                          </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-6 offset-md-6">
                                <div class="form-check form-check-inline">
                                    <label for="autoscanHidden" class="form-check-label">
                                        <input type="checkbox" name="autoscanHidden" id="autoscanHidden" class="form-check-input" /> Include hidden files/directories
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="autoscanInterval">Scan Interval (in seconds):</label>
                            </div>
                            <div class="col-md-4">
                                <input type="text" id="autoscanInterval" class="form-control" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button id="autoscanCancel" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="autoscanSave" type="submit" class="btn btn-primary" data-dismiss="modal">Save Autoscan</button>
            </div>
        </div>
    </div>
</div>

<div id="dirTweakModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Directory Tweak</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form>
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label for="dirTweakLocation">Location:</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="dirTweakLocation" name="location" class="form-control" disabled />
                                <input type="number" id="dirTweakId" name="id" class="form-control" hidden />
                                <input type="number" id="dirTweakIndex" name="status" class="form-control" hidden />
                                <input type="text" id="dirTweakStatus" name="status" class="form-control" hidden />
                            </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-4">
                                <label for="dirTweakInherit" class="form-check-label">Inherit settings to subdirs:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" name="dirTweakInherit" id="dirTweakInherit" class="form-check-input" />
                                </div>
                            </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-4">
                                <label for="dirTweakSymLinks" class="form-check-label">Follow Symbolic Links:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" name="dirTweakSymLinks" id="dirTweakSymLinks" class="form-check-input" />
                                </div>
                            </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-4">
                                <label for="dirTweakRecursive" class="form-check-label">Recursive import:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" name="dirTweakRecursive" id="dirTweakRecursive" class="form-check-input" />
                                </div>
                            </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-4">
                                <label for="dirTweakHidden" class="form-check-label">Include hidden files/directories:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" name="dirTweakHidden" id="dirTweakHidden" class="form-check-input" />
                                </div>
                            </div>
                        </div>
                        <div class="form-check form-check-inline row">
                            <div class="col-md-4">
                                <label for="dirTweakCaseSens" class="form-check-label">Case sensitive resources:</label>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" name="dirTweakCaseSens" id="dirTweakCaseSens" class="form-check-input" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label for="dirTweakMetaCharset">Metadata Charset</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="dirTweakMetaCharset" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label for="dirTweakFanArt">Fan Art File</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="dirTweakFanArt" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label for="dirTweakSubtitle">Subtitle File</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="dirTweakSubtitle" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-4">
                                <label for="dirTweakResource">Resource File</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="dirTweakResource" class="form-control" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button id="dirTweakCancel" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="dirTweakDelete" type="submit" class="btn btn-primary" data-dismiss="modal" hidden>Delete Directory Tweak</button>
                <button id="dirTweakSave" type="submit" class="btn btn-primary" data-dismiss="modal">Save Directory Tweak</button>
            </div>
        </div>
    </div>
</div>

<div id="toast" class="alert">
    <div id="grb-toast-wrapper">
        <i id="grb-toast-icon" class="fa fa-star"></i>
        <span id="grb-toast-msg"></span>
    </div>
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
